<template>
    <!-- 表单查询控件 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- 时间查询 -->
        <el-form-item label="入住时间">
            <el-date-picker v-model="formInline.Begin" type="date" placeholder="请选择开始日期" clearable />-
            <el-date-picker v-model="formInline.End" type="date" placeholder="请选择结束日期" clearable />
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
            <el-button type="primary" @click="GetOrderCountLint">查询</el-button>
        </el-form-item>
    </el-form>
    
    <el-row>
        <el-col :span="12">
            <VueEcharts :option="option" style="width: 600px;height: 400px; margin: 0 auto; "></VueEcharts>
        </el-col>
        <el-col :span="12">
            <VueEcharts :option="option1" style="width: 600px;height: 400px; margin: 0 auto; "></VueEcharts>
        </el-col>
            <VueEcharts :option="option2" style="width: 600px;height: 400px; margin: 0 auto; "></VueEcharts>
    </el-row>
    
    
</template>


<script setup lang="ts">
    import {ref,onMounted,reactive} from 'vue';
    import axios from 'axios';
    import  'echarts'
    import VueEcharts from'vue-echarts'

    //折线图
    const option=ref({})
    //柱状图
    const option1=ref({})
    //饼图
    const option2=ref({})

    onMounted(()=>{
        GetOrderCountLint();
    })
     //查询条件
     const formInline = reactive({
       Begin:"",
       End:"",
    })
    //加载数据
    const GetOrderCountLint=()=>{
        axios.get("https://localhost:44377/api/Count/GetOrderCountLint",
            {
                params:{
                    Begin:formInline.Begin,
                    End:formInline.End
                }
            }
        )
        .then(res=>{
            let OrderData=  res.data.Data;
            //依次获取日期和数量并保存到数组当中
            let dateArray=OrderData.map((item:any)=>item.Day)
            let countArray=OrderData.map((item:any)=>item.Count)

            //创建饼图所需数组
            let PieChart:any=[];

            console.log(PieChart)
            //从后台返回的数据进行数据遍历,将数据保存到饼图数组中
            OrderData.forEach((element:any) => {
                PieChart.push({vaule:element.Count,name:element.Day});
            });
            //折线图
            option.value = {
                xAxis: {
                    type: 'category',
                    data: dateArray
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: countArray,
                    type: 'line'
                    }
                ]
            };
            //柱状图
            option1.value = {
                xAxis: {
                    type: 'category',
                    data: dateArray
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: countArray,
                    type: 'bar'
                    }
                ]
            };
            //饼图
            option2.value = {
                title: {
                    text: '日订单统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: PieChart,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        })
    }
</script>



<style>
    .demo-form-inline .el-input {
    --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
    --el-select-width: 220px;
    }
</style>